<template>
  <div class="table-pro">
  <!-- 按钮组 -->
<slot name="button-group">

  <div class="btn-group" style="margin-bottom:12px"> 
    <el-button type="primary" size="small">添加</el-button>
   <el-button type="danger" size="small">批量删除</el-button>
   <el-button type="default" size="small" @click="handleExport">导出Excel</el-button>
  </div>
</slot>

  
  
    <!-- 表格 -->
    <el-table 
    :data="dataSource" 
    style="width: 100%;margin-bottom: 20px;"
    border
    stripe
    

    >
    <!-- 循环列表渲染表格中各列 -->
   <el-table-column 
   v-for="column in columns"
   :key="column.prop"
   v-bind="column"
   >
    <template v-if="column.type === 'slot'" #default="scope">
      <!-- 插槽 -->
       <!-- 插槽名称与列定义的prop一致  -->
        <slot :name="column.prop" v-bind="scope"/>

    </template>

   </el-table-column>

    <!-- <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" /> -->
  </el-table>

    <!-- 分页器 -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
     :total="total"
     @change="huandleTurnpage"
      />
    
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue"
import { utils,writeFileXLSX } from "xlsx";

// 定义属性类型
interface Props {
  columns : ITableColumn[], //表格列定义数据
  requestApi:Function, //请求数据方法
}
// 定义一个总数据记录数
const total = ref(0)
// 当前页码
const Page = ref(1)
// 每页记录数
const pageSize = ref(10)

// 组件接收的属性
const props = defineProps<Props>()

//定义状态数据，用于保存表格中的数据源
const dataSource = ref<any[]>([])

/***
 * 加载表格中的数据
 * 
 */
const loadData = async()=>{
  // 请求数据
  const result = await props.requestApi({
    page:Page.value,
    pageSize:pageSize.value
  })

  // 请求数据
  console.log("result:",result)
  dataSource.value = result.list
  console.log("dataSource.value:",dataSource.value)
  total.value   = result.total
  pageSize.value = result.pageSize
  Page.value = result.page

}
loadData()


/***
 *处理翻页效果
 */
const huandleTurnpage = (currPage:number,_pageSize:number)=>{
 
  Page.value = currPage
  pageSize.value = _pageSize
   // 翻页
  loadData()
}

/***
 * 导出数据
 * excel:工作簿（workbook）,工作表（wrokSheet）
 */
const handleExport = ()=>{
  // 导出
// 将需要导出的数据转换为工作表中需要保存的数据
  const ws = utils.json_to_sheet(dataSource.value)
  // 创建工作表
  const wb= utils.book_new()
  // /将工作表添加到工作簿中
  utils.book_append_sheet(wb,ws,"工作表")
  // 将工作簿中的数据写入到文件中
  writeFileXLSX(wb, new Date().toString() + ".xlsx")
}

</script>

<style lang="less" scoped>
.tab-pro{
    padding: 12px;
}
</style>
